/*
 * @Author: 肖思汗
 * @Date: 2025-07-04 15:56:21
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-04 16:18:46
 */

import clsx from "clsx";
import styles from "./colorItem.module.less";
import { observer } from "mobx-react-lite";

interface ColorItemProps {
    color?: string;
    active?: boolean;
    onClick?: () => void;
}

// 颜色块组件
const ColorItem = observer((props: ColorItemProps) => {

    return (
        <div
            className={clsx(styles.colorItemBoder, "colorItemBoder", props.active && styles.active)}
            style={{
                border: `4rpx solid ${props.active ? props.color : "#ffffff00"}`
            }}
            onClick={props.onClick}
        >
            <div
                className={clsx(styles.colorItem, props.active && styles.active)}
                style={{
                    backgroundColor: props.color
                }}
            >
            </div>
        </div>
    );
});

export default ColorItem;

